<template>
  <div class="wrapp">
    <div class="head">
      <div class="title"> 編輯分润规则</div>
      <Button @click="back">返回上一級</Button>
    </div>

    <div class="banner">
      <div class="baseInfo">
        <span>合同编号：</span>
        <Input v-model="contractShowData.contractNo" class="inputStyle" />
        <span style="margin-left:20px;">算力数：</span>
        <Input v-model="contractShowData.powerAmount" class="inputStyle" />
        <span style="margin-right:20px">TB</span>
        <span class="ml">过期时间：</span>
        <Row style="display:inline-block;margin-right:10px;">
          <Col>
          <DatePicker type="date" placeholder="Select date" style="width: 200px" :value="contractShowData.startDate" @on-change="action"></DatePicker>
          </Col>
        </Row>
        <span>~</span>
        <Row style="display:inline-block;margin-left:10px;">
          <Col>
          <DatePicker type="date" placeholder="Select date" style="width: 200px" :value="contractShowData.endDate" @on-change="cut"></DatePicker>
          </Col>
        </Row>
      </div>
      <div class="content">
        <div class="first">
          <span class="contentTitle">总分润规则(客户方和平台方)</span>
          <!-- <div class="item" style="margin-top:20px;">
            <span class="itemTitle">矿工：</span>
            <Input v-model="name" class="inputStyle" style="width:200px" />
            <Button style="margin-right:50px;margin-left:20px;" @click="selectMiner">选择</Button>
            <span class="itemSpan">该用户的上线是：15000402842</span>
          </div>
          <div class="item">
            <span class="itemTitle">算力数：</span>
            <Input v-model="suanli" class="inputStyle" />
            <span style="margin-right:50px;margin-left:20px;">TB</span>
          </div> -->
          <div class="guize">
            <span class="itemTitle">规则：</span>
            <div>
              <div class="list" v-for="(item,index) in firstArray" :key="index">
                <div class="listItem">
                  <span style=" margin-left: 10px;margin-right:10px;">当挖矿收益累计在</span>
                  <Input class="inputStyle" v-model="item.intervalBegin" />
                  <span>~</span>
                  <Input class="inputStyle" v-model="item.intervalEnd" />
                  <span>元时，客户方分润：</span>
                  <Input class="inputStyle" v-model="item.percent" />
                  <span>%</span>
                  <Icon type="ios-close-circle-outline" color="red" style="margin-left:10px;" @click="delectProfit(index)" v-if="index>0" />
                </div>
              </div>
              <Button style="margin-left:10px;margin-top:10px;" @click="addFirst">新增</Button>
            </div>
          </div>
        </div>
        <div class="second">
          <span class="contentTitle">客户方分润规则</span>
          <div class="keHuItem" v-for="(keHuItem,keHuindex) in keHuArray" :key="keHuindex">
            <span>规则：当挖矿收益累计在</span>
            <Input class="inputStyle" style="width:150px;" v-model="keHuItem.intervalBegin" />
            <span>~</span>
            <Input class="inputStyle" style="width:150px;" v-model="keHuItem.intervalEnd" />
            <span>元时,</span>
            <Icon type="ios-close-circle-outline" color="red" class="keHuCel" @click="delectKeHuItem(keHuindex)" v-if="keHuindex>0" />

            <div class="secondItem" v-for="(item,index) in keHuItem.arry" :key="index">
              <span>参与者：</span>
              <Input class="inputStyle" v-model="item.userIdShow" style="width:150px;" disabled />
              <Button style="margin-right:50px;margin-left:20px;" @click="selectParticipant(index,keHuindex)">选择</Button>
              <span>分润比例：</span>
              <Input class="inputStyle" v-model="item.percent" />
              <span>%</span>
              <span style="margin-left:40px;">角色：</span>
              <Select v-model="item.projectRole" style="width:100px;">
                <Option v-for="characterListiItem in item.projectRoles" :value="characterListiItem.value" :key="characterListiItem.value">{{ characterListiItem.label }}</Option>
              </Select>
              <span style="margin-left:40px;">备注：</span>
              <Input class="inputStyle" v-model="item.remark" style="width:150px;" />
              <Icon type="ios-close-circle-outline" color="red" style="margin-left:10px;" @click="delectParticipant(index,keHuindex)" v-if="index>0" />
            </div>
            <Button style="margin-top:10px;" @click="addSecond(keHuindex)">新增</Button>
          </div>
          <Button @click="addKeHu" class="addKeHu">新增</Button>
        </div>

        <div class="second">
          <span class="contentTitle">平台方分润规则</span>
          <div class="keHuItem" v-for="(ptItem,pTindex) in pTArray" :key="pTindex">
            <span>规则：当挖矿收益累计在</span>
            <Input class="inputStyle" style="width:150px;" v-model="ptItem.intervalBegin" />
            <span>~</span>
            <Input class="inputStyle" style="width:150px;" v-model="ptItem.intervalEnd" />
            <span>元时,</span>
            <Icon type="ios-close-circle-outline" color="red" class="keHuCel" @click="delectptItem(pTindex)" v-if="pTindex>0" />

            <div class="secondItem" v-for="(ptPTItem,index) in ptItem.arry" :key="index">
              <span>平台方：</span>
              <Input class="inputStyle" v-model="ptPTItem.userIdShow" style="width:150px;" disabled />
              <Button style="margin-right:50px;margin-left:20px;" @click="selectPt(index,pTindex)">选择</Button>
              <span>分润比例：</span>
              <Input class="inputStyle" v-model="ptPTItem.percent" />
              <span>%</span>
              <span style="margin-left:40px;">角色：</span>
              <Select v-model="ptPTItem.projectRole" style="width:100px;">
                <Option v-for="characterListiItem in ptPTItem.projectRoles" :value="characterListiItem.value" :key="characterListiItem.value">{{ characterListiItem.label }}</Option>
              </Select>
              <span style="margin-left:40px;">备注：</span>
              <Input class="inputStyle" v-model="ptPTItem.remark" style="width:150px;" />
              <!-- <Select v-model="ptItem.projectRole" size="small" style="width:100px">
                <Option v-for="characterListiItem in characterList" :value="characterListiItem.value" :key="characterListiItem.value">{{ characterListiItem.label }}</Option>
              </Select> -->
              <Icon type="ios-close-circle-outline" color="red" style="margin-left:10px;" @click="delectPt(index,pTindex)" v-if="index>0" />
            </div>
            <Button style="margin-top:10px;" @click="addPtSecond(pTindex)">新增</Button>
          </div>
          <Button @click="addPt" class="addKeHu">新增</Button>
        </div>
      </div>
    </div>
    <div class="foot">
      <Button type="primary" style="width:200px;" @click="sure">确定</Button>
    </div>

    <!-- 选择客户参与者 -->
    <Modal v-model="participantShow" :mask-closable="false" width="1076" cancel-text="">
      <Input search enter-button placeholder="手机号/用户名/钱包地址" style="width:300px;margin-bottom:20px;" @on-search="searchParticipant" v-model="searchParticipantData" />
      <Table :columns="participantColumns" :data="participantShowData" :border="true" :loading="isParticipantLoading"></Table>
      <Page :total="participantTotal" :current="participantPageNum" :page-size="participantPageSize" show-total placement="top" @on-change="participantHandlePage" style="margin-top:20px;"></Page>
    </Modal>

    <!-- 选择平台方参与者 -->
    <Modal v-model="pTShow" :mask-closable="false" width="1076" cancel-text="">
      <Input search enter-button placeholder="手机号/用户名/钱包地址" style="width:300px;margin-bottom:20px;" @on-search="searchPt" v-model="searchPtData" />
      <Table :columns="pTColumns" :data="pTShowData" :border="true" :loading="isParticipantLoading"></Table>
      <Page :total="pTTotal" :current="pTPageNum" :page-size="PtPageSize" show-total placement="top" @on-change="pTHandlePage" style="margin-top:20px;"></Page>
    </Modal>

    <!-- 确认信息 -->
    <Modal v-model="sureShow" :mask-closable="false" width="1076" cancel-text="" @on-ok="ok">
      <div>合同编号：{{contractShowData.contractNo}}</div>
      <div>算力数：{{contractShowData.powerAmount}}T</div>
      <div>过期时间：{{contractShowData.startDate}}~{{contractShowData.endDate}}</div>
      <div class="sureTitle">总分润规则(客户方和平台方)</div>
      <div v-for="(item,index) in firstArray" :key="index">
        <span>收益累计范围：{{item.intervalBegin}}~{{item.intervalEnd}}元</span>
        <span class="sureMl">客户方分润：{{item.percent}}</span>
      </div>
      <div class="sureTitle">客户方分润规则</div>
      <div v-for="(item,index) in keHuArray" :key="index+100" style="margin-top:10px;">
        <span>收益累计范围：{{item.intervalBegin}}~{{item.intervalEnd}}元时的参与者是：</span>
        <div v-for="(keHuItem,keHuIndex) in item.arry" :key="keHuIndex" style="margin-left:20px;">
          <span>参与者：{{keHuItem.userIdShow}}</span>
          <span class="sureMl">分润比例：{{keHuItem.percent}}%</span>
          <span class="sureMl">角色：{{keHuItem.projectRoleName}}</span>
          <span class="sureMl">备注：{{keHuItem.remark}}</span>

        </div>
      </div>
      <div class="sureTitle">平台方分润规则</div>
      <div v-for="(item,index) in pTArray" :key="index+1000" style="margin-top:10px;">
        <span>收益累计范围：{{item.intervalBegin}}~{{item.intervalEnd}}元时的参与者是：</span>
        <div v-for="(ptItem,ptIndex) in item.arry" :key="ptIndex" style="margin-left:20px;">
          <span>参与者：{{ptItem.userIdShow}}</span>
          <span class="sureMl">分润比例：{{ptItem.percent}}%</span>
          <span class="sureMl">角色：{{ptItem.projectRoleName}}</span>
          <span class="sureMl">备注：{{ptItem.remark}}</span>

        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import apis from "../../util/apis.js";
export default {
  name: "FenChengEdit",
  data() {
    return {
      characterList: [
        {
          value: '01',
          label: '矿工'
        },
        {
          value: '02',
          label: '矿场主'
        },
        {
          value: '03',
          label: '经销商'
        },
        {
          value: '04',
          label: '介绍经销商'
        },
        {
          value: '05',
          label: '讲师'
        },
        {
          value: '06',
          label: '平台'
        },
        {
          value: '07',
          label: '股东'
        },
        {
          value: '08',
          label: '员工'
        },
        {
          value: '09',
          label: '投资人'
        },
      ],
      props: null,
      contractShowData: {
        contractNo: null,
        endDate: null,
        powerAmount: null,
        startDate: null
      },
      secondArray: null,
      sureShow: false,
      contractId: null,
      startTime: null,
      endTime: null,
      suanli: null,
      name: null,
      firstArray: [
        {
          intervalBegin: "",
          intervalEnd: "",
          percent: ""
        }
      ],
      pTArray: [
        {
          intervalBegin: "",
          intervalEnd: "",
          arry: [
            {
              allotUserId: "",
              percent: "",
              remark: "",
              projectRole: '',
              projectRoles: [],
            }
          ]
        }
      ],
      keHuArray: [
        {
          intervalBegin: "",
          intervalEnd: "",
          arry: [
            {
              allotUserId: "",
              percent: "",
              remark: "",
              projectRole: '',
              projectRoles: []
            }
          ]
        }
      ],
      currentid: null,

      currentid_1: null,
      ////////选择参与者列表/////
      participantColumns: [
        {
          title: "姓名",
          key: "userName",
          align: "center"
        },
        {
          title: "手机号码",
          key: "mobile",
          align: "center"
        },
        {
          title: "钱包地址",
          key: "wallet",
          align: "center"
        },
        {
          title: "选择",
          key: "chose",
          width: 70,
          align: "center",
          render: (h, params) => {
            let id = params.row.userId;
            let flag = false;
            if (this.currentid_1 === id) {
              flag = true;
            } else {
              flag = false;
            }
            let self = this;
            return h("div", [
              h("Radio", {
                props: {
                  value: flag
                },
                on: {
                  "on-change": () => {
                    self.currentid_1 = id;
                    let chuLi = null;
                    let chuLiArry = null;
                    if (params.row.roles.length > 0) {
                      chuLiArry = params.row.roles
                      let projectRoles = this.comFun(chuLiArry);
                      this.keHuArray[this.controlParticipant_1].arry[this.controlParticipant].projectRoles = projectRoles;
                      if (projectRoles.length === 1) {
                        this.keHuArray[this.controlParticipant_1].arry[this.controlParticipant].projectRole = projectRoles[0].value;
                      }
                    } else {
                      this.keHuArray[this.controlParticipant_1].arry[this.controlParticipant].projectRoles = null;
                    }
                    this.keHuArray[this.controlParticipant_1].arry[
                      this.controlParticipant
                    ].userIdShow =
                      params.row.userName + "/" + params.row.mobile;
                    this.keHuArray[this.controlParticipant_1].arry[
                      this.controlParticipant
                    ].allotUserId =
                      params.row.userId;
                  }
                }
              })
            ]);
          }
        }
      ],
      participantShowData: [],
      ///////平台方////////
      pTColumns: [
        {
          title: "姓名",
          key: "userName",
          align: "center"
        },
        {
          title: "手机号码",
          key: "mobile",
          align: "center"
        },
        {
          title: "钱包地址",
          key: "wallet",
          align: "center"
        },
        {
          title: "选择",
          key: "chose",
          width: 70,
          align: "center",
          render: (h, params) => {
            let id = params.row.userId;
            let flag = false;
            if (this.currentid_PT === id) {
              flag = true;
            } else {
              flag = false;
            }
            let self = this;
            return h("div", [
              h("Radio", {
                props: {
                  value: flag
                },
                on: {
                  "on-change": () => {
                    self.currentid_PT = id;
                    let chuLi = null;
                    let chuLiArry = null;
                    if (params.row.roles.length > 0) {
                      chuLiArry = params.row.roles
                      let projectRoles = this.comFun(chuLiArry);
                      this.pTArray[this.controlPt_1].arry[this.controlPt].projectRoles = projectRoles;
                      if (projectRoles.length === 1) {
                        this.pTArray[this.controlPt_1].arry[this.controlPt].projectRole = projectRoles[0].value;
                      }
                    } else {
                      this.pTArray[this.controlPt_1].arry[this.controlPt].projectRoles = null;
                    }
                    this.pTArray[this.controlPt_1].arry[this.controlPt].userIdShow = params.row.userName + "/" + params.row.mobile;
                    this.pTArray[this.controlPt_1].arry[this.controlPt].allotUserId = params.row.userId;
                  }
                }
              })
            ]);
          }
        }
      ],
      currentid_PT: null,
      pTShowData: [],
      pTTotal: 0,
      pTPageNum: 1,
      PtPageSize: 5,
      participantShow: false,
      participantTotal: 0,
      participantPageNum: 1,
      participantPageSize: 5,
      isParticipantLoading: false,
      searchParticipantData: null,
      controlParticipant: null,
      controlParticipant_1: null,
      error: 0,
      exceed: 0,
      pTShow: false,
      controlPt: null,
      controlPt_1: null,
      searchPtData: null
    };
  },

  methods: {
    comFun(chuLiArry) {
      let characterList = [];
      if (!chuLiArry) {
        return characterList;
      }
      chuLiArry.forEach(ele => {
        let temp = {}
        if (ele === "01") {
          temp.label = "矿工"
          temp.value = "01"
        } else if (ele === "02") {
          temp.label = "矿场主"
          temp.value = "02"
        }
        else if (ele === "03") {
          temp.label = "经销商"
          temp.value = "03"
        }
        else if (ele === "04") {
          temp.label = "介绍经销商"
          temp.value = "04"
        }
        else if (ele === "05") {
          temp.label = "讲师"
          temp.value = "05"
        }
        else if (ele === "06") {
          temp.label = "平台"
          temp.value = "06"
        }
        else if (ele === "07") {
          temp.label = "股东"
          temp.value = "07"
        }
        else if (ele === "08") {
          temp.label = "员工"
          temp.value = "08"
        }
        else if (ele === "09") {
          temp.label = "投资人"
          temp.value = "09"
        }
        characterList.push(temp);
      })
      return characterList;
    },
    back() {
      this.$router.push({
        name: "ProjectDetail",
        query: {
          param: this.props,
          proName: "rule"
        }
      });
    },
    action(date) {
      this.contractShowData.startDate = date + " 00:00:00";
    },
    cut(date) {
      this.contractShowData.endDate = date + " 23:59:59";
    },
    ////////////总分润新增/////////
    addFirst() {
      let temp = {};
      temp.intervalBegin = "";
      temp.intervalEnd = "";
      temp.percent = "";
      this.firstArray.push(temp);
    },
    delectProfit(index) {
      this.firstArray.splice(index, 1);
    },
    ///////////平台分润规则//////
    delectptItem(pTindex) {
      this.pTArray.splice(pTindex, 1);
    },
    selectPt(index, pTindex) {
      this.controlPt = index;
      this.controlPt_1 = pTindex;
      this.pTShow = true;
      this.searchParticipantData = null;
      this.searchPtData = null;
      this.getparticipantData(0, 5);
    },
    delectPt(index, pTindex) {
      this.pTArray[pTindex].arry.splice(index, 1);
    },
    addPtSecond(pTindex) {
      let temp = {};
      temp.allotUserId = "";
      temp.percent = "";
      temp.remark = "";
      temp.projectRole = "";
      this.pTArray[pTindex].arry.push(temp);
    },
    addPt() {
      this.pTArray = this.synInfo(this.pTArray);
    },
    searchPt() {
      this.getparticipantData(0, 5, this.searchPtData)
    },
    pTHandlePage(value) {
      this.pTPageNum = value;
      this.getparticipantData(this.pTPageNum - 1, 5);
    },
    //////////二级分润新增///////
    addSecond(keHuindex) {
      let temp = {};
      temp.allotUserId = "";
      temp.percent = "";
      temp.remark = "";
      this.keHuArray[keHuindex].arry.push(temp);
    },
    addKeHu() {
      this.keHuArray = this.synInfo(this.keHuArray);
    },
    delectParticipant(index, keHuindex) {
      this.keHuArray[keHuindex].arry.splice(index, 1);
    },
    delectKeHuItem(keHuindex) {
      this.keHuArray.splice(keHuindex, 1);
    },

    //////选择参与者///////
    participantHandlePage(value) {
      this.participantPageNum = value;
      this.getparticipantData(this.participantPageNum - 1, 5);
    },
    selectParticipant(index, keHuindex) {
      this.controlParticipant = index;
      this.controlParticipant_1 = keHuindex;
      this.participantShow = true;
      this.getparticipantData(0, 5);
    },
    searchParticipant() {
      this.getparticipantData(0, 5, this.searchParticipantData)
    },
    /////////////////////////////////////////////////////////////////
    sure() {
      console.log(this.contractShowData.contractNo);

      if (!this.contractShowData.contractNo) {
        this.$Message.error("合同编号：不能为空！");
        return;
      }
      if (!this.contractShowData.startDate) {
        this.$Message.error("合同时间：你家合同开始时间没有的吗？");
        return;
      }
      if (!this.contractShowData.endDate) {
        this.$Message.error("合同时间：你家合同结束时间没有的吗？");
        return;
      }
      if (!this.contractShowData.powerAmount) {
        this.$Message.error("算力数：麻烦您填一下算力数，OK？");
        return;
      }
      let firstShow = false;
      let KeHuIf = false;
      let KeHuShow = false;
      let keHuSize = false;
      let PtShow = false;
      let KeHuStart = null;
      let KeHuEnd = null;
      let PTIf = false;
      let PTStart = null;
      let PTEnd = null;
      let pTSize = false;
      this.firstArray.forEach(element => {
        if (element.intervalEnd) {
          if (
            parseFloat(element.intervalBegin) > parseFloat(element.intervalEnd)
          ) {
            firstShow = true;
            return;
          }
        }
      });
      if (firstShow) {
        this.$Message.error(
          "总分润规则(客户方和平台方):开始区间大于等于结束区间"
        );
        return;
      }
      let KeHuSum_1 = 0;
      this.keHuArray.forEach(element => {
        let KeHuSum = 0;
        if (element.intervalEnd) {
          if (
            parseFloat(element.intervalBegin) > parseFloat(element.intervalEnd)
          ) {
            keHuSize = true;
            console.log(keHuSize);
            return;
          }
        }

        element.arry.forEach(e => {
          if (!e.allotUserId) {
            KeHuShow = true;
            return;
          }
          KeHuSum = KeHuSum + parseFloat(e.percent);
        });
        if (KeHuShow) {
          return;
        }
        if (KeHuSum != 100) {
          KeHuStart = element.intervalBegin;
          KeHuEnd = element.intervalEnd;
          KeHuSum_1 = 100 - KeHuSum
          KeHuIf = true;
          return;
        }
      });
      if (keHuSize) {
        this.$Message.error("客户方规则:开始区间大于等于结束区间");
        return;
      }
      if (KeHuIf) {
        this.$Message.error(
          "客户方规则分润：" + KeHuStart + "~" + KeHuEnd + "之和不等于100%，还剩下" + KeHuSum_1 + "%"
        );
        return;
      }
      if (KeHuShow) {
        this.$Message.error("客户方规则分润：参与者不能为空");
        return;
      }
      let PTSum_1 = 0;
      this.pTArray.forEach(element => {
        let PTSum = 0;
        if (element.intervalEnd) {
          if (parseFloat(element.intervalBegin) > parseFloat(element.intervalEnd)) {
            pTSize = true;
            return;
          }
        }
        element.arry.forEach(e => {
          if (!e.allotUserId) {
            PtShow = true;
            return;
          }
          PTSum = PTSum + parseFloat(e.percent);
          let a = 100
        });
        if (PtShow) {
          return;
        }
        if (PTSum.toFixed(4) != '100.0000') {
          PTStart = element.intervalBegin;
          PTEnd = element.intervalEnd;
          PTSum_1 = 100 - PTSum;
          PTIf = true;
          // console.log(PTStart)
          // console.log(PTEnd)
          // console.log(PTSum)
          return;
        }
      });
      if (pTSize) {
        this.$Message.error("平台方规则:开始区间大于等于结束区间");
        return;
      }
      if (PtShow) {
        this.$Message.error("平台方规则分润：参与者不能为空");
        return;
      }
      if (PTIf) {
        this.$Message.error(
          "平台方规则分润：" + PTStart + "~" + PTEnd + "之和不等于100%;还剩下" + PTSum_1 + "%"
        );
        return;
      }
      this.keHuArray.forEach(element => {
        element.arry.forEach(e => {
          let temp = {};
          if (e.projectRole === "01") {
            e.projectRoleName = "矿工";
          } else if (e.projectRole === "02") {
            e.projectRoleName = "矿场主";
          } else if (e.projectRole === "03") {
            e.projectRoleName = "经销商";
          } else if (e.projectRole === "04") {
            e.projectRoleName = "介绍经销商";
          } else if (e.projectRole === "05") {
            e.projectRoleName = "讲师";
          } else if (e.projectRole === "06") {
            e.projectRoleName = "平台";
          } else if (e.projectRole === "07") {
            e.projectRoleName = "股东";
          } else if (e.projectRole === "08") {
            e.projectRoleName = "员工";
          } else if (e.projectRole === "09") {
            e.projectRoleName = "投资人";
          }
        })
      });
      this.pTArray.forEach(element => {
        element.arry.forEach(e => {
          let temp = {};
          if (e.projectRole === "01") {
            e.projectRoleName = "矿工";
          } else if (e.projectRole === "02") {
            e.projectRoleName = "矿场主";
          } else if (e.projectRole === "03") {
            e.projectRoleName = "经销商";
          } else if (e.projectRole === "04") {
            e.projectRoleName = "介绍经销商";
          } else if (e.projectRole === "05") {
            e.projectRoleName = "讲师";
          } else if (e.projectRole === "06") {
            e.projectRoleName = "平台";
          } else if (e.projectRole === "07") {
            e.projectRoleName = "股东";
          } else if (e.projectRole === "08") {
            e.projectRoleName = "员工";
          } else if (e.projectRole === "09") {
            e.projectRoleName = "投资人";
          }
        })
      });
      this.sureShow = true;
    },
    getparticipantData(pageNum, size, keyWord) {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      let url = apis.relatedUser + "/" + this.props.row.id + "?" + "page=" + pageNum + "&size=" + size + "&keyWord=" + keyWord;

      this.$axios({
        method: "get",
        url: url,
        headers: {
          Authorization: "Bearer " + token
        }
      })
        .then(res => {
          if (res.status == "200") {
            res.data.forEach(element => {
              element.userIdShow = element.userName + "/" + element.userMobile;
            });
            this.pTShowData = res.data;
            this.participantShowData = res.data;

            this.participantTotal = parseInt(res.headers["x-total-count"]);
            this.pTTotal = parseInt(res.headers["x-total-count"]);
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    //新增合同接口数据
    addHeTong() {
      let params = {};
      let details = [];
      params.contractNo = this.contractShowData.contractNo;
      params.endDate = this.contractShowData.endDate;
      params.startDate = this.contractShowData.startDate;
      params.powerAmount = parseFloat(this.contractShowData.powerAmount);
      params.projectId = parseInt(this.contractShowData.projectId);
      params.id = this.contractShowData.id;

      this.firstArray.forEach(element => {
        let temp = {};
        temp.allotType = 1;
        temp.intervalBegin = parseFloat(element.intervalBegin);
        temp.intervalEnd = parseFloat(element.intervalEnd);
        temp.percent = parseFloat(element.percent) / 100;
        details.push(temp);
      });
      this.keHuArray.forEach(element => {
        element.arry.forEach(e => {
          let temp = {};
          temp.allotType = 2;
          temp.intervalBegin = parseFloat(element.intervalBegin);
          temp.intervalEnd = parseFloat(element.intervalEnd);
          temp.percent = parseFloat(e.percent) / 100;
          temp.allotUserId = parseInt(e.allotUserId);
          temp.remark = e.remark;
          temp.projectRole = e.projectRole;
          details.push(temp);
        });
      });
      this.pTArray.forEach(element => {
        element.arry.forEach(e => {
          let temp = {};
          temp.allotType = 3;
          temp.intervalBegin = parseFloat(element.intervalBegin);
          temp.intervalEnd = parseFloat(element.intervalEnd);
          temp.percent = parseFloat(e.percent) / 100;
          temp.allotUserId = parseInt(e.allotUserId);
          temp.remark = e.remark;
          temp.projectRole = e.projectRole;
          details.push(temp);
        });
      });
      params.details = details;
      return params;
    },
    ok() {
      let params = this.addHeTong();
      let token = this.$localStorage.storageGet("TOKEN");
      console.log(token);
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      let url = apis.addFenRun;
      this.$axios({
        method: "post",
        url: url,
        data: params,
        headers: {
          Authorization: "Bearer " + token
        }
      })
        .then(res => {
          if (res.status == "200") {
            this.$Message.success("更新成功了哦");
            this.$router.push({
              name: "ProjectDetail",
              query: {
                param: this.props,
                proName: "rule"
              }
            });
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    checkCOntarctData(param) {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      let url = apis.checkTHDetail + "/" + param;
      this.$axios({
        method: "get",
        url: url,
        headers: {
          Authorization: "Bearer " + token
        }
      })
        .then(res => {
          if (res.status == "200") {
            this.contractShowData = res.data;
            let arr = res.data.details;
            arr.forEach(element => {
              element.userIdShow = element.userName + "/" + element.userMobile;
              element.projectRoles = this.comFun(element.projectRoles);
              console.log(element.projectRoles)
            });
            console.log(this.arr)
            let firstArray = [];
            let keHuArray = [];
            let pTArray = [];
            arr.forEach(element => {
              element.percent = (parseFloat(element.percent) * 100).toFixed(4);
              if (element.allotType === 1) {
                firstArray.push(element);
              } else if (element.allotType === 2) {
                keHuArray.push(element);
              } else {
                pTArray.push(element);
              }
            });

            this.firstArray = firstArray;
            this.keHuArray = this.mapLoction(keHuArray);
            this.pTArray = this.mapLoction(pTArray);
            console.log(this.pTArray);
            console.log(this.keHuArray);
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          console.log(err)
          this.$Message.error(err.response.data.message);
        });
    },
    mapLoction(arr) {
      var map = {},
        dest = [];
      for (var i = 0; i < arr.length; i++) {
        var ai = arr[i];
        if (!map[ai.intervalBegin]) {
          dest.push({
            intervalBegin: ai.intervalBegin,
            intervalEnd: ai.intervalEnd,
            arry: [ai]
          });
          map[ai.intervalBegin] = ai;
        } else {
          for (var j = 0; j < dest.length; j++) {
            var dj = dest[j];
            if (dj.intervalBegin == ai.intervalBegin) {
              dj.arry.push(ai);
              break;
            }
          }
        }
      }
      return dest;
    },
    ///////////////////////////////////////////////////////信息同步///////////////////////////////////////////////
    synInfo(originalArr) {
      let len = originalArr.length;
      console.log(originalArr);
      let obj = {};
      (obj.intervalBegin = ""), (obj.intervalEnd = ""), (obj.arry = []);
      originalArr[len - 1].arry.forEach(element => {
        let temp = {};
        temp.remark = element.remark;
        temp.userIdShow = element.userIdShow;
        temp.percent = "";
        temp.allotUserId = element.allotUserId;
        temp.projectRole = element.projectRole;
        temp.projectRoles = element.projectRoles;
        obj.arry.push(temp);
      });
      originalArr.push(obj);
      return originalArr;
    }
  },
  created() {
    this.props = this.$route.query.props;
  },
  mounted() {
    let getParams = this.$route.query.param;
    this.checkCOntarctData(getParams.id);
  },
  watch: {
    firstArray: {
      handler: function (val, oldVal) {
        if (val.length > 1) {
          for (let i = 0; i < val.length; i++) {
            if (i < val.length - 1) {
              let ele_mid = val[i];
              let ele_next = val[i + 1];
              ele_next.intervalBegin = ele_mid.intervalEnd;
            }
          }
        }
      },
      deep: true
    },
    pTArray: {
      handler: function (val, oldVal) {
        if (val.length > 1) {
          for (let i = 0; i < val.length; i++) {
            if (i < val.length - 1) {
              let ele_mid = val[i];
              let ele_next = val[i + 1];
              ele_next.intervalBegin = ele_mid.intervalEnd;
            }
          }
        }
      },
      deep: true
    },
    keHuArray: {
      handler: function (val, oldVal) {
        if (val.length > 1) {
          for (let i = 0; i < val.length; i++) {
            if (i < val.length - 1) {
              let ele_mid = val[i];
              let ele_next = val[i + 1];
              ele_next.intervalBegin = ele_mid.intervalEnd;
            }
          }
        }
      },
      deep: true
    }
  }
};
</script>

<style scoped>
.sureTitle {
  font-size: 18px;
  color: red;
  margin-top: 10px;
}
.sureMl {
  margin-left: 20px;
}
.wrapp {
  padding: 0 20px;
}

.head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
}

.title {
  color: #666;
  font-size: 20px;
}

.banner {
  padding: 20px;
  font-size: 18px;
}

.inputStyle {
  width: 97px;
  margin-left: 10px;
  margin-right: 10px;
}
.ml {
  margin-left: 100px;
}
.content {
  margin-top: 20px;
}
.contentTitle {
  color: red;
  font-size: 20px;
  border-bottom: 1px solid red;
  font-weight: bold;
}
.item {
  margin-top: 20px;
}
.itemTitle {
  font-weight: bold;
  width: 100px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
}
.itemSpan {
  font-size: 16px;
}
.content span {
  display: inline-block;
  height: 36px;
  line-height: 36px;
}
.guize {
  margin-top: 20px;
  display: flex;
}
.list {
  margin-top: 10px;
}
.list:first-child {
  margin-top: 0px;
}
.second {
  margin-top: 40px;
  width: 100%;
  position: relative;
  padding-bottom: 50px;
  background: rgba(255, 255, 0, 0.1);
  padding: 20px;
  padding-bottom: 60px;
}
.secondItem {
  margin-top: 20px;
  margin-left: 100px;
}
.foot {
  margin-top: 30px;
  width: 200px;
  margin: 30px auto;
}
.keHuItem {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 10px;
  width: 80%;
  margin-bottom: 10px;
  clear: both;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 20px;
  position: relative;
}
.keHuCel {
  position: absolute;
  top: 0px;
  right: 5px;
}
.addKeHu {
  position: absolute;
  width: 200px;
  bottom: 20px;
  left: 50%;
  margin-left: -100px;
}
.first {
  padding: 20px;
  background: rgba(255, 255, 0, 0.1);
}
</style>